<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>input 相关监听方法</title>
    <style>
        .main-content {
            width: 800px;
            margin: 30px auto;
        }

        .main-content input {
            outline: 0;
            border: 1px solid #dedede;
            width: 100%;
            box-sizing: border-box;
            height: 40px;
            color: #888;
        }
    </style>
</head>
<body>
    <div class="main-content">
        聚焦方法:<input data-id="id" myAttr="myAttr" type="text" id="ipt1" placeholder="聚焦方法">
        失去焦点方法:<input type="text" id="ipt2" placeholder="失去焦点方法">
        失去焦点并且内容改变:<input type="text" id="ipt3" placeholder="失去焦点并且内容改变">
        按住某个键:<input type="text" id="ipt4" placeholder="按住某个键">
        文本被选中:<input type="text" id="ipt5" placeholder="文本被选中">
        内容改变:<input type="text" id="ipt6" placeholder="内容改变">
    </div>

    <script>

        function fn () {
            console.log('oninput');
        }

        function debunce (fn,timeout) {
            let timer = null;
            return function () {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    fn();
                }, timeout);
            }
        }

        let ipt1 = document.getElementById('ipt1');
        let ipt2 = document.getElementById('ipt2');
        let ipt3 = document.getElementById('ipt3');
        let ipt4 = document.getElementById('ipt4');
        let ipt5 = document.getElementById('ipt5');
        let ipt6 = document.getElementById('ipt6');

        ipt1.onfocus = function () {
            console.log('focus');
        }

        ipt2.onblur = function () {
            console.log('blur');
        }

        ipt3.onchange = function () {
            console.log('change');
        }

        ipt4.onkeydown = function () {
            console.log('keydown');
        }

        ipt5.onselect = function () {
            console.log('select');
        }

        ipt6.oninput = debunce(fn,2000);
 
        // console.dir(ipt1);
        // console.log(ipt1.getAttribute('myAttr'));
        // console.log(ipt1.getAttribute('data-id'));
        // ipt1.value = 'xxxoooxxxooo';

        for (const key in ipt1) {
            console.log(key)
        }
        
    </script>
</body>
</html>